<template>
	<view class="previewImg-box">
		<u-toast ref="uToast" />
		<view class="toast" v-show="show">
			<view class="loading-icon">
				<u-loading mode="flower" size="36"></u-loading>
			</view>
			<text class="des">
				正在保存
			</text>
		</view>
		<!-- 预览图片 -->
		<view class="status_bar"></view>
		<view class="top-contain">
			<u-icon name="arrow-left" hover-class='hoverClass' class="hoverClass" @click="back" size="36" style="margin-left: 30rpx;"></u-icon>
			<text class="title">头像</text>
			<!-- 操作按钮 -->
			<u-icon name="list" hover-class='hoverClass' class="hoverClass" @click="showActionSheet" size="36" style="margin-right: 30rpx;"></u-icon>
		</view>
		<view class="img-box">
			<image :src="options.src" mode="widthFix" class="image" @longtap="showActionSheet"></image>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				options:null
			}
		},
		onLoad(options) {
			this.options = {
				...options
			}
		},
		methods:{
			// 选择图片
			chooseImg(){
				uni.chooseImage({
					count:1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album'],
					success(res) {
						uni.getImageInfo({
							src:res.tempFilePaths[0],
							success(r) {
								if(r.type == 'gif'){
									return	uni.showToast({
										title:"请勿选择gif图",
										icon:'none'
									})
								}
								uni.navigateTo({
									animationType:"slide-in-bottom",
									// animationDuration:300,
									url:"/pages/clipImage/index?src="+res.tempFilePaths[0]
								})
							}
						})
						
					},
					fail(err) {
						// 取消图片选择
					}
				})
			},
			saveHttpFile(){
				const that = this;
				this.show = true;
				uni.downloadFile({
					url:that.options.src,
					success(res) {
						if(res.statusCode === 200){
							const file = res.tempFilePath;
							that.saveSysFile(file)
						}
					}
				})
			},
			// 保存到系统相册
			saveSysFile(file){
				const that = this;
				uni.saveImageToPhotosAlbum({
					filePath:file,
					success(res) {
						that.show = false;
						that.$refs.uToast.show({
								title: '保存成功',
								type: 'success'
							})
					},
					fail(err) {
						
					}
				})
			},
			showActionSheet(){
				const that = this;
				uni.showActionSheet({
					itemList:[
						'更换头像',
						'保存到相册'
					],
					success(res) {
						switch (res.tapIndex){
							case 0:
							// 更换头像
								that.chooseImg()
								break;
							case 1:
							// 保存图片
							that.saveHttpFile()
								break;
							default:
								break;
						}
					}
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.previewImg-box{
		background-color: #111;
		height: 100vh;
		overflow: hidden;
		position: relative;
		.toast{
			color: #eee;
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 200;
			background-color: rgba($color: #000000, $alpha: .5);
			// min-width: 180rpx;
			border-radius: 10rpx;
			transform: translate(-50%,-50%);
			.loading-icon{
				text-align: center;
				margin-bottom: 15rpx;
			}
			padding: 15rpx 30rpx;
			.des{
				font-size: 28rpx;
			}
		}
		.top-contain{
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;
			margin-bottom: 150rpx;
			.title{
				font-size: 36rpx;
			}
			.hoverClass{
				transition: .1s;
			}
			.hoverClass:active{
				color: #999;
			}
		}
		.img-box{
			.image{
				width: 100%;
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>
